<template>
  <div class="header-two">
    <div class="header-hm">
      <el-row type="flex" justify="space-between">
        <el-page-header content="添加月卡" @back="fn" />
        <span style="float: right; padding: 3px 0" type="text">黑马管理员</span>
      </el-row>
    </div><br>
    <el-row type="flex" justify="center">
      <el-card class="box-card" style="width:1660px">
        <div slot="header" class="clearfix">
          <span>车辆信息</span>
        </div>
        <div style="margin:20px 130px">
          <el-form ref="formRef" label-width="100px" :rules="rules" :model="formData">
            <el-row type="flex" justify="space-around">
              <el-form-item label="车主姓名" prop="personName">
                <el-input v-model="formData.personName" placeholder="请输入车主姓名" style="width:538px" />
              </el-form-item>
              <el-form-item label="联系方式" prop="phoneNumber">
                <el-input v-model="formData.phoneNumber" placeholder="请输入联系方式" style="width:538px" />
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="space-around">
              <el-form-item label="车牌号码" prop="carNumber">
                <el-input v-model="formData.carNumber" placeholder="请输入车牌号码" style="width:538px" />
              </el-form-item>
              <el-form-item label="车辆品牌" prop="carBrand">
                <el-input v-model="formData.carBrand" placeholder="请输入车辆品牌" style="width:538px" />
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </el-row>

    <el-row type="flex" justify="center" style="margin:20px 0 0 0">
      <el-card class="box-card" style="width:1660px">
        <div slot="header" class="clearfix">
          <span>最近一次月卡缴费信息</span>
        </div>
        <div style="margin:20px 130px">
          <el-form ref="refForm" label-width="100px" :rules="rules" :model="formData">
            <el-row type="flex" justify="space-around">
              <el-form-item label="有效日期" prop="time">
                <el-date-picker
                  v-model="formData.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width:538px"
                />
              </el-form-item>
              <el-form-item label="支付金额" prop="paymentAmount">
                <el-input v-model="formData.paymentAmount" placeholder="请输入支付金额" style="width:538px" />
              </el-form-item>
            </el-row>

            <el-form-item label="支付方式" style="margin-left:20px" prop="paymentMethod">
              <el-select v-model="formData.paymentMethod" placeholder="请选择支付方式" style="width:538px">
                <el-option value="Alipay" label="支付宝" />
                <el-option value="WeChat" label="微信" />
                <el-option value="Cash" label="线下" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-row>
    <div class="footer">
      <el-row type="flex" justify="center">
        <el-button @click="resetCard">重置</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { addCardAPI } from '@/api/monthCard'
export default {
  data() {
    return {

      formData: {
        time: '',
        personName: '', // 车主姓名
        phoneNumber: '', // 联系方式
        carNumber: '', // 车牌号码
        carBrand: '', // 车辆品牌
        cardStartDate: '', // 有效时间开始
        cardEndDate: '', // 有效时间结束
        paymentAmount: '', // 支付金额
        paymentMethod: ''// 支付方式   支付宝Alipay  微信WeChat    线下Cash
      },
      rules: {
        personName: [
          {
            required: true, message: '请输入车主姓名！', trigger: 'blur'
          }
        ],
        phoneNumber: [
          {
            required: true, message: '请输入联系方式！', trigger: 'blur'
          },
          {
            pattern: /^1[34578]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'
          }
        ],
        carNumber: [
          {
            required: true, message: '请输入车牌号码！', trigger: 'blur'
          },
          {
            pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z]{1}[A-Z_0-9]{6}$/, message: '车牌号码格式不正确', trigger: 'blur'
          }
        ],
        carBrand: [
          {
            required: true, message: '请输入车辆品牌！', trigger: 'blur'
          }
        ],
        paymentAmount: [
          {
            required: true, message: '请输入支付金额！', trigger: 'blur'
          }
        ],
        paymentMethod: [
          {
            required: true, message: '请选择支付方式', trigger: 'blur'
          }
        ],
        time: [
          {
            required: true, message: '请输入有效日期！', trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 重置信息
    resetCard() {
      this.$refs.formRef.resetFields()
      this.$refs.refForm.resetFields()
    },
    // 提交
    async onSubmit() {
      this.$refs.formRef.validate()
      this.$refs.refForm.validate()
      await addCardAPI({
        personName: this.formData.personName,
        phoneNumber: this.formData.phoneNumber,
        carNumber: this.formData.carNumber,
        carBrand: this.formData.carBrand,
        cardStartDate: this.formData.time[0],
        cardEndDate: this.formData.time[1],
        paymentAmount: this.formData.paymentAmount,
        paymentMethod: this.formData.paymentMethod
      })
      this.$message.success('新增成功')
      // 直接返回
      window.history.go(-1)
    },
    // 返回上一页
    fn() {
      window.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .header-hm{
    height: 64px;
    padding: 20px 10px;
    background-color: #fff;
  }
.footer{
background-color: #fff;
  position: fixed; /* 或者使用 absolute，取决于你的需求 */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 100%; /* 占据整个页面宽度 */
  height: 80px; /* 或者你想要的任何高度 */
  padding:20px 0;
  z-index: 9999; /* 确保元素显示在其他内容之上 */
}
.header-two{
      min-height: 100vh; /* 视口高度 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  background-color:#f4f6f8 ;
}
</style>
